<template>
	<view>
		<!-- navbar -->
		<!-- <u-navbar :is-back="false" z-index="99999"> -->
			<!-- tabs -->
			<!-- <u-tabs :list="tabList" font-size="35" name="cate_name" bg-color="#fff" :current="current" @change="tabChange"></u-tabs> -->
		<!-- </u-navbar> -->
		<u-tabs :list="tabList" font-size="35" name="cate_name" bg-color="#fff" :current="current"
			@change="tabChange"></u-tabs>
		<!-- 关注 -->

		<circle-list :list="list" :loadStatus="loadStatus"></circle-list>
		<!-- <view v-if="current === 0"></view>
		<view v-if="current === 1"> -->
		<!-- 我的圈子 -->

		<!-- 	<circle-list :list="joinTopicPost" :loadStatus="loadStatus3"></circle-list>
		</view>
		<view v-if="current === 2"><post-list :list="imgPost" :loadStatus="loadStatus4"></post-list></view>
		<view v-if="current === 3"><post-list :list="videoPost" :loadStatus="loadStatus5"></post-list></view>
		<view v-if="current === 4"><post-list :list="touPost" :loadStatus="loadStatus6"></post-list></view> -->
		<!-- 发布弹窗 -->
		<!-- 	<u-popup v-model="showAddPopup" mode="bottom">
			<view class="handle-wrap">
				<view @click="handleJump(item)" class="item" v-for="(item, index) in addPopup" :key="index">
					<image mode="widthFix" class="icon" :src="item.icon"></image>
					<text class="txt">{{ item.text }}</text>
				</view>
			</view>
			<view class="handle-close"><u-icon @click="showAddPopup = false" name="close"></u-icon></view>
		</u-popup>
 -->
		<!-- tabbar -->
		<!-- <q-tabbar :active="0" :count="msgCount"></q-tabbar> -->
		<!-- <view @click="showAddPopup = !showAddPopup" class="addCircle">
				<image mode="widthFix" class="icon-add" src="/static/tabbar/add.png"></image>
			</view> -->
	</view>
</template>

<script>
	import API from '../../utils/api.js';
	import postList from '../../components/post-list/post-list.vue';
	export default {
		components: {
			postList
		},
		data() {
			return {
				showAddPopup: false,
				sessionUid: uni.getStorageSync('userInfo').uid,
				loadStatus: "loadmore",
				// loadStatus1: 'loadmore',
				// loadStatus2: 'loadmore',
				// loadStatus3: 'loadmore',
				// loadStatus4: 'loadmore',
				// loadStatus5: 'loadmore',
				// loadStatus6: 'loadmore',
				page: 1,
				// page2: 1,
				// page3: 1,
				// page4: 1,
				// page5: 1,
				// page6: 1,
				limit:10,
				shareCover: '',
				topDisList: [],
				swiperList: [],
				followUserPost: [],
				joinTopicPost: [],
				touPost: [],
				tabList: [],
				list:[],
				// addPopup: [
				// 	{
				// 		icon: '/static/h_2.png',
				// 		text: '动态',
				// 		url: '/pages/post/add?type=1'
				// 	},
				// 	{
				// 		icon: '/static/h_3.png',
				// 		text: '视频',
				// 		url: '/pages/post/add?type=2'
				// 	},
				// 	{
				// 		icon: '/static/h_1.png',
				// 		text: '投票',
				// 		url: '/pages/post/vote'
				// 	}
				// ],
				current: 0,
				// joinTopicList: []
			};
		},
		computed: {
			msgCount() {
				return this.$store.state.messegeNum;
			}
		},
		onLoad() {
			// this.getSysInfo();
			// this.getFollowUserPost();
			// this.getJoinTopicPost();
			// this.getUserJoinTopic();
			// this.getimgPost();
			// this.getvideoPost();
			// this.gettouPost();
			this.getTags()
		},
		onShow() {
			// if (this.$store.state.userInfo.uid) {
			// 	this.getMsgNum();
			// }
		},
		onReachBottom() {
			this.page++;
			this.getFollowUserPost()
			// if (this.current === 0) {
			// 	this.page2++;
			// 	this.getFollowUserPost();
			// }

			// if (this.current === 1) {
			// 	this.page3++;
			// 	this.getJoinTopicPost();
			// }
			// if (this.current === 2) {
			// 	this.page4++;
			// 	this.getimgPost();
			// }
			// if (this.current === 3) {
			// 	this.page5++;
			// 	this.getvideoPost();
			// }
			// if (this.current === 4) {
			// 	this.page6++;
			// 	this.gettouPost();
			// }
		},
		onPullDownRefresh() {
			if (this.current === 0) {
				this.page2 = 1;
				this.followUserPost = [];
				this.getFollowUserPost();
			}

			if (this.current === 1) {
				this.page3 = 1;
				this.joinTopicPost = [];
				this.getJoinTopicPost();
				this.getUserJoinTopic();
			}
			if (this.current === 2) {
				this.page4 = 1;
				this.imgPost = [];
				this.getimgPost();
			}
			if (this.current === 3) {
				this.page5 = 1;
				this.videoPost = [];
				this.getvideoPost();
			}
			if (this.current === 4) {
				this.page6 = 1;
				this.touPost = [];
				this.gettouPost();
			}

			uni.stopPullDownRefresh();
		},
		watch:{
			current(){
				this.getFollowUserPost()
				this.page = 1
				this.limit = 10,
				this.list = []
			}
		},
		methods: {
			getTags() {
				this.$H.get('/WebaSquareClass/getSquareClasslist').then(res => {
						this.tabList = res
						this.getFollowUserPost()
					});
			},
			getMsgNum() {
				this.$H.post('message/num').then(res => {
					this.$store.state.messegeNum = [0, 0, 0, res.result.all_count, 0];
				});
			},
			handleJump(e) {
				uni.navigateTo({
					url: e.url
				});

				this.showAddPopup = false;
			},
			tabChange(index) {
				this.current = index;
			},
			// 用户加入的圈子
			// getUserJoinTopic() {
			// 	this.loadStatus = 'loading';
			// 	this.$H
			// 		.post('topic/userJoinTopic', {
			// 			class_id: this.topicClassId
			// 		})
			// 		.then(res => {
			// 			this.joinTopicList = res.result.data;
			// 			uni.stopPullDownRefresh();
			// 		});
			// },
			// getimgPost() {
			// 	this.loadStatus4 = 'loading';
			// 	this.$H
			// 		.get('post/list', {
			// 			page: this.page4,
			// 			type: 1
			// 		})
			// 		.then(res => {
			// 			this.imgPost = this.imgPost.concat(res.result.data);
			// 			if (res.result.current_page === res.result.last_page || res.result.last_page === 0) {
			// 				this.loadStatus4 = 'nomore';
			// 			} else {
			// 				this.loadStatus4 = 'loadmore';
			// 			}
			// 		});
			// },
			// getvideoPost() {
			// 	this.loadStatus5 = 'loading';
			// 	this.$H
			// 		.get('post/list', {
			// 			page: this.page5,
			// 			type: 2
			// 		})
			// 		.then(res => {
			// 			this.videoPost = this.videoPost.concat(res.result.data);
			// 			if (res.result.current_page === res.result.last_page || res.result.last_page === 0) {
			// 				this.loadStatus5 = 'nomore';
			// 			} else {
			// 				this.loadStatus5 = 'loadmore';
			// 			}
			// 		});
			// },
			// gettouPost() {
			// 	this.loadStatus6 = 'loading';
			// 	this.$H
			// 		.get('post/list', {
			// 			page: this.page6,
			// 			type: 4
			// 		})
			// 		.then(res => {
			// 			this.touPost = this.touPost.concat(res.result.data);
			// 			if (res.result.current_page === res.result.last_page || res.result.last_page === 0) {
			// 				this.loadStatus6 = 'nomore';
			// 			} else {
			// 				this.loadStatus6 = 'loadmore';
			// 			}
			// 		});
			// },
			jump(url) {
				uni.navigateTo({
					url: url
				});
			},
			// getSysInfo() {
			// 	this.$H.get('system/miniConfig').then(res => {
			// 		this.shareCover = res.result.intro;
			// 	});
			// },
			// 获取加入的圈子动态
			// getJoinTopicPost() {
			// 	this.loadStatus3 = 'loading';
			// 	uni.request({
			// 		url: API.GetAllSquare("circle", this.page3, 6),
			// 		success: res => {
			// 			this.joinTopicPost = this.joinTopicPost.concat(res.data.data);
			// 			console.log(this.joinTopicPost)
			// 			if (this.page3 === res.data.pages) {
			// 				this.loadStatus3 = '暂无更多';
			// 			} else {
			// 				this.loadStatus3 = 'loadmore';
			// 			}
			// 		}
			// 	});
			// },
			// 获取关注用户帖子
			getFollowUserPost() {
				this.loadStatus = 'loading';
				let id = this.tabList[this.current]['id'];
				let url = 'square/getBySquareClass/' + id + '/' + this.page + '/' + this.limit
				this.$H.get(url).then(res => {
					if(res.data.data.length > 0){
						this.list = this.list.concat(res.data.data);
					}
					if (res.data.data.length < 10) {
						this.loadStatus = 'nomore';
					} else {
						this.loadStatus = 'loadmore';
					}
				})
				// this.$H
				// 	.get('post/followUserPost', {
				// 		page: this.page2
				// 	})
				// 	.then(res => {
				// 		this.followUserPost = this.followUserPost.concat(res.result.data);
				// 		console.log(this.followUserPost)
				// 		if (res.result.current_page === res.result.last_page || res.result.last_page === 0) {
				// 			this.loadStatus1 = 'nomore';
				// 		} else {
				// 			this.loadStatus1 = 'loadmore';
				// 		}
				// 	});
			}
		}
	};
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.swiper-body {
		height: calc(100vh - var(--status-bar-height) - 43px);
	}

	.body-scroll-view {
		width: 100%;
		height: 100%;
	}

	.tab-box {
		width: 80%;
	}

	.block-title {
		font-weight: bold;
		padding: 20rpx;
		color: #616161;
		display: flex;
		font-size: 28rpx;

		.right {
			margin-left: auto;
			color: #999;
			font-size: 24rpx;
		}
	}

	// 顶部圈子
	.topic-wrap {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 20rpx;

		.head {
			display: flex;
			margin-bottom: 20rpx;

			.right {
				margin-left: auto;
				color: #616161;
			}
		}

		.more-topic {
			margin-right: 20rpx;
			font-size: 24rpx;
			text-align: center;

			.bg-wrap {
				width: 110rpx;
				height: 110rpx;
				background-image: linear-gradient(to right, $themes-color, $sub-color);
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;

				image {
					width: 70%;
					height: 70%;
				}
			}
		}

		.topic-list {
			display: flex;

			.topic-item {
				font-size: 24rpx;
				text-align: center;
				margin-right: 20rpx;
				position: relative;

				.user {
					font-size: 20rpx;
					color: #fff;
					background-image: linear-gradient(to right, $themes-color, $sub-color);
					position: absolute;
					right: 0;
					top: 0;
					padding: 0 10rpx;
					border-top-right-radius: 10rpx;
					border-bottom-left-radius: 10rpx;
				}
			}
		}
	}

	// 发布弹出框
	.handle-wrap {
		display: flex;
		padding: 50rpx 0;

		.item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			flex: 1;
			padding: 20rpx 0;
			border-radius: 20rpx;

			.icon {
				width: 100rpx;
				margin-bottom: 20rpx;
			}

			.txt {
				font-size: 28rpx;
			}
		}
	}

	.handle-close {
		display: flex;
		justify-content: center;
		margin-bottom: 50rpx;
	}

	.addCircle {

		position: fixed;
		left: 50%;
		top: 84%;
		transform: translate(-50%, -50%);
		/*50%为自身尺寸的一半*/
	}

	.icon-add {
		z-index: 999;
		width: 90rpx;
		height: 90rpx;
	}
</style>